<template>
  <div>
    <el-dialog
      :title="this.$t('ExpressOrderManagementLang.viewBill')"
      :visible.sync="Visible"
      width="1050px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Bill_information')}}</div>
          <MyTable
            :tableColumn="tableColumn"
            :tableData="tableData"
            :isOrder="false"
          >
            <template v-slot:content="scope">
              <span class="btnCLass" v-if="scope.config.templateType=='textBtn_look'" @click="look(scope.row)">{{$t('common.look')}}</span>
              <span v-else>{{ scope.row[scope.config.prop] }}</span>
            </template>
          </MyTable>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button  @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
    <BillDetails
      ref="billDetails"
    ></BillDetails>
  </div>
</template>

<script>
import BillDetails from "./ExpressOrderManagement_viewBill_billDetails";
export default {
  components: {BillDetails},
  props: {
    // 接收绑定参数
    midHight: [Number,String],
  },
  data() {
    return {
      Visible: false,
      order_sn:'',
      lid:"",
      tableColumn: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('ExpressBillManagementLang.bill_num'),
          prop: "bill_sn",
          width: 180,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.statement_date'),
          prop: "created_at",
          width: 180,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.customer'),
          prop: "order_uid_name",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Bill_amount'),
          prop: "discount_total_price",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Creator'),
          prop: "creator_id_name",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.operation'),
          prop: "operation",
          width: 80,
          templateType:'textBtn_look'
        },
      ],
      tableData: [],
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
    
  },
  mounted() {
  },
  deactivated(){
    
  },
  watch: {
  },
  methods: {
   
    init(data) {
      this.order_sn=data.order_sn
      this.lid=data.lid
      this.Visible = true;
      this.getData();
    },
    //获取单条
    getData() {
      this.$get("bills", { order_sn: this.order_sn,lid: this.lid }).then((res) => {
        this.tableData=res.data
      });
    },
    look(data){
      this.$refs.billDetails.init(data);
    },
    //取消修改
    cancel() {
      this.tableData=[]  
      this.Visible = false;
      let dom = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
         dom[i].style.border = "1px solid #E0E3E9";
      }
    },

  },
};
</script>

<style scoped lang="less" >
  .midContant {
    border: 0;
    width: 100%;
  }
  .dialogBox .dialogBoxItem .dialogBoxItemRow {
    width: 24%;
  }
</style>